import React, { useMemo, useReducer } from 'react'

const Table = (props)=> {
  return (
    <div>
      table: current = {props?.page}
    </div>
  )
}
const Pagination = (props) => {
  let pags = [1,2,3]
  let clicked = props.callback||props.dispatch

  let page = props.page||1
  useMemo(()=>{
    console.log('memo, page=',page)
  },[page])
  return (
    <div>
      pagination : 
      {
        pags.map(cur => {
          return (
            <button key={cur} onClick={()=>clicked && clicked({
              page:cur
            })} >{cur}</button>
          )
        })
      }
      
      
      ; 当前页数： = {page}
    </div>
  )
}

export default function ReducerDemo() {

  const [page ,setPage ] = useReducer((state,payload) => {
    console.log(state,payload)
    return payload.page||state
  },1)

  
  return (
    <div>
      <Table page={page} />
      <Pagination dispatch={setPage} page={page} />
        
    </div>
  )

}